<template>
    <div id="lifecyclehooks">
      <button @click="add">加分</button>
      <button>{{ this.msg }}</button>
      <button @click="$destroy()">销毁</button>
    </div>
</template>

<script>
    export default {
        name: "lifecyclehooks",
      data(){
          return{
            msg:1
          }
      },
      beforeCreate:function () {
        console.log('1.0 beforeCreate 初始化之后',this.msg);
      },
      created:function () {
        console.log('2.0 created 创建完成',this.msg);
      },
      beforeMount:function () {
        console.log('3.0 beforeMount  挂载之前',this.mes);
      },
      mounted:function () {
        console.log('4.0 mounted 被创建',this.msg);
      },
      beforeUpdate:function () {
        console.log('5.0 beforeUpdate  数据更新前',this.msg);
      },
      updated:function () {
        console.log('6.0 updated 被更新后',this.msg);
      },
      activated:function () {
        console.log('7.0 activated',this.msg);
      },
      deactivated:function () {
        console.log('8.0 deactivated',this.msg);
      },
      beforeDestroy:function () {
        console.log('9.0 beforeDestroy 销毁之前',this.msg);
      },
      destroyed:function () {
        console.log('10.0 destroyed 销毁之后',this.msg);
      },
      methods:{
          add:function () {
            this.msg++;
          }
      }
    }
</script>

<style scoped>

</style>
